<template>
    <div class="data-list-line">
        <ve-line v-if="projectLineData.length" width="100%" height="303px" :extend="chartExtend" :colors="chartColor" :data="chartData"></ve-line>
        <no-data v-else>
            <span v-if="hasPermission && hasProject" class="hasPermission">目前还没有项目哦! 您可以<el-button type="text" @click="handleClick">新建项目</el-button>开启机器学习之旅~</span>
            <span v-else-if="!hasPermission && hasProject">您目前还没有项目，请加入一个项目或向系统管理员申请授权！！！</span>
            <span>该项目暂无数据</span>
        </no-data>
    </div>
</template>

<script>
import NoData from '@/components/NoData'
export default {
    name: 'DataListLine',
    props: {
        projectLineData: {
            required: true,
            type: Array
        },
        hasProject: {
            required: true,
            type: Boolean
        }
    },
    components: { NoData },
    data () {
        return {
            // chartSettings: {
            //     yAxisName: ['数量']
            // },
            hasPermission: false,
            chartExtend: {
                series: {
                    lineStyle: {
                        width: 2
                    }
                    // symbolSize: 0
                },
                legend: {
                    data: ['实验', '数据', '模型'],
                    bottom: 0,
                    itemWidth: 13,
                    icon: 'rect',
                    itemGap: 40
                },
                grid: {
                    left: '4%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    axisLabel: {
                        textStyle: {
                            color: '#464D5F'
                        }
                    },
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#cdcdcd'
                        }
                    }
                },
                yAxis: {
                    nameLocation: 'end',
                    nameTextStyle: {
                        padding: [0, 0, 0, -39]
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'deshde'
                        }
                    }
                }
            },
            chartColor: ['#3ED9A5', '#F2637B', '#6BABF5'],
            chartData: {
                columns: ['日期', '实验', '数据', '模型'],
                rows: []
            }
        }
    },
    created () {
        if (JSON.parse(localStorage.getItem('PERMISSIONS')).includes('project:operate')) {
            this.hasPermission = true
        }
    },
    methods: {
        handleClick () {
            this.$router.push('./projects')
        }
    },
    watch: {
        projectLineData: {
            handler (val) {
                this.chartData.rows = val
            },
            deep: true,
            immediate: true
        }
    }
}
</script>

<style lang="less">
.data-list-line {
    width: 100%;
    height: 100%;
    .no-data {
        height: 300px;
    }
    .hasPermission {
        .el-button {
            font-size: 14px;
        }
    }
}
</style>
